<template>
	<view class="main">
		<view class="active_tit">
			<view class="tit">
				服务类
			</view> 
			<!-- <view class="add">
				＋
			</view> -->
		</view>
		<!-- input -->
		<ActiveForm required  ref='busiType'>
			<view class="active_label">
				业务类型：
			</view>
			<view class="active_input">
				<SelectPicker v-model="form.busiType" :options="busiTypeOptions" placeholder="请选择" />
			</view>
		</ActiveForm>
		
		<!-- <ActiveForm required  ref=''>
			<view class="active_label">
				是否加盟品牌：
			</view>
			<view class="active_input">
				<input type="text" v-model="form.isfranchise" />
			</view>
		</ActiveForm>
		
		<ActiveForm required  ref=''>
			<view class="active_label">
				加盟品牌：
			</view>
			<view class="active_input">
				<input type="text" v-model="form.franchise" />
			</view>
		</ActiveForm> -->
		
		<!-- <ActiveForm required  ref=''>
			<view class="active_label">
				月均人工工资（元）：
			</view>
			<view class="active_input">
				<input type="text" v-model="form.salaryPerMonth" />
			</view>
		</ActiveForm> -->
		
		<ActiveForm required  ref='turnover12month'>
			<view class="active_label">
				近12个月营业额（元）：
			</view>
			<view class="active_input">
				<mInput type="number" v-model="form.turnover12month" />
			</view>
		</ActiveForm>
		<ActiveForm required  ref='invoiceRatio'>
			<view class="active_label">
				开票比例（%）：
			</view>
			<view class="active_input">
				<mInput :thousand='false' type="number" v-model="form.invoiceRatio" />
			</view>
		</ActiveForm>
		
		<ActiveForm required  ref='consumablesCost'>
			<view class="active_label">
				近12个月耗材成本（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="form.consumablesCost" />
			</view>
		</ActiveForm>
		
		<ActiveForm required  ref='storeCount'>
			<view class="active_label">
				店面个数：
			</view>
			<view class="active_input">
				<mInput :thousand='false' type="number" v-model="form.storeCount" />
			</view>
		</ActiveForm>
		<ActiveForm required  ref='marginRate'>
			<view class="active_label">
				综合毛利率（%）：
			</view>
			<view class="active_input">
				<mInput :thousand='false' type="number" v-model="form.marginRate" />
			</view>
		</ActiveForm>
		<ActiveForm required  ref='turnoverLast12'>
			<view class="active_label">
				近13-24个月营业额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="form.turnoverLast12" />
			</view>
		</ActiveForm>
		<ActiveForm required ref='nextYearTurnover'>
			<view class="active_label">
				预计未来一年营业额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="form.nextYearTurnover" />
			</view>
		</ActiveForm>
		<ActiveForm required  ref='ownYardCount'>
			<view class="active_label">
				自购/自建经营场地个数：
			</view>
			<view class="active_input">
				<mInput :thousand='false' type="number" v-model="form.ownYardCount" />
			</view>
		</ActiveForm>
		<view class="active_tit">
			<view class="tit2">
				
			</view> 
		</view>
		<ActiveForm style="width: 100%;"   ref='marginDatail'>
			<view class="active_label">
				毛利及成本结构描述：
			</view>
			<view class="active_input">
				<textarea style="width: 100%;font-size: 2.6rem;" placeholder='最多输入1000字' maxlength="1000"  v-model="form.marginDatail" />
			</view>
		</ActiveForm>
		
		
		<view class="active_tit">
			<view class="tit2">
				销售额信息
			</view> 
		</view>
	
		<ActiveForm required  ref='busyMonths' style="width: 50%;">
			<view class="active_label" style="width: 22rem;">
				旺季月份：
			</view>
			<view class="active_input">
				<jsfun-picker style="width: 100%;height: 4rem;" mess="备注：旺季,一般,淡季请选择不重复月份" :listArr="priceList" :defaultArr="xseForm.busyMonths"
				 type="multiple" @click="priceChange1">
					<!-- 自定义页面显示元素 -->
					<view class="sl">
						{{xseForm.busyMonths}}
					</view>
				</jsfun-picker>
				<!-- <input type="text" v-model="xseForm.busyMonths" /> -->
			</view>
		</ActiveForm>
		
		<ActiveForm required  ref='busyTurnover' style="width: 50%;">
			<view class="active_label">
				旺季月均销售额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="xseForm.busyTurnover" />
			</view>
		</ActiveForm>
		
		<ActiveForm required  ref='middleMonths' style="width: 50%;">
			<view class="active_label" style="width: 22rem;">
				一般月份：
			</view>
			<view class="active_input">
				<jsfun-picker style="width: 100%;height: 4rem;" mess="备注：旺季,一般,淡季请选择不重复月份" :listArr="priceList" :defaultArr="xseForm.middleMonths"
				 type="multiple" @click="priceChange2">
					<!-- 自定义页面显示元素 -->
					<view class="sl">
						{{xseForm.middleMonths}}
					</view>
				</jsfun-picker>
				<!-- <input type="text" v-model="xseForm.middleMonths" /> -->
			</view>
		</ActiveForm>
		<ActiveForm required  ref='middleTurnover' style="width: 50%;">
			<view class="active_label">
				一般月份销售额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="xseForm.middleTurnover" />
			</view>
		</ActiveForm>
		<ActiveForm required  ref='lowMonths' style="width: 50%;">
			<view class="active_label" style="width: 22rem;">
				淡季月份：
			</view>
			<view class="active_input">
				<jsfun-picker style="width: 100%;height: 4rem;" mess="备注：旺季,一般,淡季请选择不重复月份" :listArr="priceList" :defaultArr="xseForm.lowMonths"
				 type="multiple" @click="priceChange3">
					<!-- 自定义页面显示元素 -->
					<view class="sl">
						{{xseForm.lowMonths}}
					</view>
				</jsfun-picker>
				<!-- <input type="text" v-model="xseForm.lowMonths" /> -->
			</view>
		</ActiveForm>
		<ActiveForm required  ref='lowTurnover' style="width: 50%;">
			<view class="active_label">
				淡季月份销售额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="xseForm.lowTurnover" />
			</view>
		</ActiveForm>
		<!-- <button type="default" @click="getForm">getForm</button> -->
	</view>
</template>

<script>
	import jsfunPicker from '@/components/jsfun-picker/jsfun-picker.vue'
	import SelectPicker from "../../../SelectPicker";
	export default {
		name: 'activeForm',
		data() {
			return {
				priceList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				province: "",
				city: "",
				county: "",
				index: 1,
				xseForm:{
					
				},
				form: {
					corCerttype: '',
					checked:'',
				},
				busiTypeOptions:[]
			}
		},
		components: {
			SelectPicker,jsfunPicker
		},
		watch:{
			xseForm:{
				handler:function(res){
					//console.warn('serviceClass组件数据变化',res)
					getApp().globalData.stdOffsurIndustryTurnover = res
				},
				deep:true
			},
			form:{
				handler:function(res){
					//console.warn('serviceClass组件数据变化',res)
					getApp().globalData.stdOffsurService = res
				},
				deep:true
			}
		},
		mounted() {
			
			//获取返显数据
			setTimeout(()=>{
				//数据反显
				this.form = getApp().globalData.stdOffsurService
				this.xseForm = getApp().globalData.stdOffsurIndustryTurnover
				this.busiTypeOptions = getApp().globalData.optType.BUSITYPE
				this.priceList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			},getApp().globalData.timeout)
		},
		methods:{
			priceChange1(data) {
				if(this.xseForm.busyMonths===null){
					this.xseForm.busyMonths=''
				}
				if(this.xseForm.middleMonths===null){
					this.xseForm.middleMonths=''
				}
				if(this.xseForm.lowMonths===null){
					this.xseForm.lowMonths=''
				}
				let flag = false
				let removeArr = [...this.xseForm.middleMonths.split(','),...this.xseForm.lowMonths.split(',')]
				let arr = data.textStr.split(',')
				for(let i=0;i<arr.length;i++){
					for(let j=0;j<removeArr.length;j++){
						if(arr[i]==removeArr[j]){
							arr.remove(arr[i])
							flag = true
						}
					}
				}
				
				setTimeout(()=>{
					if(flag){
						uni.showToast({
							title:'选择有重复，已自动移除',
							icon:"none",
							duration:2000
						})
						data.textStr = arr.toString()
						this.xseForm.busyMonths = arr.toString()
					}else{
						this.xseForm.busyMonths = data.textStr
					}
				},300)
			    
				
				
			},
			priceChange2(data) {
				if(this.xseForm.busyMonths===null){
					this.xseForm.busyMonths=''
				}
				if(this.xseForm.middleMonths===null){
					this.xseForm.middleMonths=''
				}
				if(this.xseForm.lowMonths===null){
					this.xseForm.lowMonths=''
				}
				let flag = false
				let removeArr = [...this.xseForm.busyMonths.split(','),...this.xseForm.lowMonths.split(',')]
				let arr = data.textStr.split(',')
				for(let i=0;i<arr.length;i++){
					for(let j=0;j<removeArr.length;j++){
						if(arr[i]==removeArr[j]){
							arr.remove(arr[i])
							flag = true
						}
					}
				}
				
				setTimeout(()=>{
					if(flag){
						uni.showToast({
							title:'选择有重复，已自动移除',
							icon:"none",
							duration:2000
						})
						data.textStr = arr.toString()
						this.xseForm.middleMonths = arr.toString()
					}else{
						this.xseForm.middleMonths = data.textStr
					}
				},300)
				
			
			},
			priceChange3(data) {
				if(this.xseForm.busyMonths===null){
					this.xseForm.busyMonths=''
				}
				if(this.xseForm.middleMonths===null){
					this.xseForm.middleMonths=''
				}
				if(this.xseForm.lowMonths===null){
					this.xseForm.lowMonths=''
				}
				let flag = false
				let removeArr = [...this.xseForm.busyMonths.split(','),...this.xseForm.middleMonths.split(',')]
				let arr = data.textStr.split(',')
				for(let i=0;i<arr.length;i++){
					for(let j=0;j<removeArr.length;j++){
						if(arr[i]==removeArr[j]){
							arr.remove(arr[i])
							flag = true
						}
					}
				}
				
				setTimeout(()=>{
					if(flag){
						uni.showToast({
							title:'选择有重复，已自动移除',
							icon:"none",
							duration:2000
						})
						data.textStr = arr.toString()
						this.xseForm.lowMonths = arr.toString()
					}else{
						this.xseForm.lowMonths = data.textStr
					}
				},300)
			
				
			
			},
		}
	}
</script>

<style lang="scss">
	
	
</style>


